<template>
  <div class="page">
    <van-popup round v-model="popupShow" position="bottom">
      <template>
        <van-picker
          show-toolbar
          :columns="pickerData"
          @confirm="pickerConfirm"
          @cancel="pickerCancel"
        ></van-picker>
      </template>
    </van-popup>
    <div class="page-list">
      <div class="page-search">
        <van-cell-group class="page-search-select">
          <van-field
            :value="data.is_appear_name"
            right-icon="arrow-down"
            clickable
            readonly
            placeholder="是否上报"
            @click="pickerChange('appear')"
          />
        </van-cell-group>
        <van-cell-group class="page-search-select">
          <van-field
            :value="data.is_risk_name"
            right-icon="arrow-down"
            clickable
            readonly
            placeholder="有无风险"
            @click="pickerChange('risk')"
          />
        </van-cell-group>
        <van-button
          style="width: 20%; border: 0px"
          text="搜索"
          @click="ssinit"
        />
      </div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-empty v-show="dataList.length <= 0" description="" />
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :error.sync="errorLoading"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="page-list-item"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="page-list-item-inner">
              <div class="w100 list-card">
                <van-row type="flex" justify="start" class="w100">
                  <van-col span="24" class="mid bold">
                    {{ item.name }}
                    <!-- <div class="tag" :class="item.is_appear_name === '未上报' ? 'noAppear' : 'isAppear'">
                      {{ item.is_appear_name === '未上报' ? '未上报' : '已上报' }}
                    </div>
                    <div v-if="item.is_temp === '1' && item.is_appear_name !== '未上报'" class="tag noRisk">
                      发热
                    </div>
                    <div v-if="item.is_area_risk === '1' && item.is_appear_name !== '未上报'" class="tag noRisk">
                      风险地区
                    </div>
                    <div v-if="item.is_hsjc === '1' && item.is_appear_name !== '未上报'" class="tag noRisk">
                      无核酸
                    </div>
                    <div v-if="item.is_ymjz === '1' && item.is_appear_name !== '未上报'" class="tag noRisk">
                      未接种疫苗
                    </div> -->
                  </van-col>
                </van-row>
              </div>
              <div class="desc">
                <p>核酸检测时间：{{ item.hsjcsj }}</p>
              </div>
              <!-- <div class="page-list-item-inner-bottom" v-if="item.is_appear == '1'"
                v-show="item.is_temp === '1' || item.is_area_risk === '1' || item.is_hsjc === '1' || item.is_ymjz === '1'">
                <van-button class="page-list-item-inner-bottom-btn" size="small" color="#D58913" type="info"
                  text="每日上报情况" @click="moduleAction('detail', item)" />
              </div> -->
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getbzrList, getHealthInfo } from '@/api/school'

export default {
  data() {
    return {
      data: {},
      pickerData: [],
      pickerType: '',
      dict: {
        appear: [
          { value: '0', text: '未上报' },
          { value: '1', text: '已上报' },
        ],
        risk: [
          { value: '0', text: '无风险' },
          { value: '1', text: '有风险' },
        ],
      },
      dataList: [],
      route: {},
      page: {
        num: 1,
        total: 0,
      },
      loading: true,
      errorLoading: false,
      finished: false,
      popupShow: false,
      refreshing: false,
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.route = this.$route.query
    this.init()
  },
  methods: {
    ssinit() {
      this.dataList = []
      this.page.num = 1
      this.init()
    },
    init() {
      this.loading = true
      this.onLoad()
    },
    getListAction() {
      const data = {
        pageNo: this.page.num,
        pageSize: 999,
        card_no: this.route.card_no,
        ...this.data,
      }
      getbzrList(data).then((ret) => {
        const data = ret.data
        if (data.errcode === 0) {
          this.dataList.push(...data.data.results)
          this.page.total = data.data.totalRecord
          this.page.num += 1
          if (data.data.pageNo >= data.data.totalPage) {
            this.finished = true
          }
        } else {
          this.errorLoading = true
        }
        this.loading = false
      })
    },
    onRefresh() {
      document.querySelector('html').scrollTop = '0'
      // 重置筛选数据
      this.checkedList = []
      // 清空列表数据
      this.finished = false
      this.refreshing = true
      // 重新加载数据
      this.loading = true
      this.page.num = 1
      this.onLoad()
    },
    onLoad() {
      // 异步更新数据
      // if (this.userInfo.cardNo) {
      if (this.refreshing) {
        this.dataList = []
        this.page.num = 1
        this.refreshing = false
      }
      this.getListAction()
      // } else {
      //   this.loading = false
      // }
    },

    async moduleAction(type, item) {
      switch (type) {
        case 'detail':
          const healthData = await getHealthInfo({
            id: item.id,
            type: 'children',
          })
          if (healthData.data.errcode == 0 && healthData.data.data) {
            this.$router.push({
              path: '/school/healthStudent',
              query: {
                student_id: item.id,
                parent_id: item.parent_id,
                type: 'children',
                showType: 'detail',
              },
            })
          }
          break
      }
    },
    pickerChange(type) {
      this.pickerType = type
      switch (type) {
        case 'appear':
          this.pickerData = this.dict.appear
          this.popupShow = true
          break
        case 'risk':
          this.pickerData = this.dict.risk
          this.popupShow = true
          break
      }
    },
    pickerConfirm(e) {
      switch (this.pickerType) {
        case 'appear':
          this.data.is_appear_name = e.text
          this.data.is_appear = e.value
          this.popupShow = false
          break
        case 'risk':
          this.data.is_risk_name = e.text
          this.data.is_risk = e.value
          this.popupShow = false
          break
      }
    },
    pickerCancel(e) {
      switch (this.pickerType) {
        case 'appear':
          this.data.is_appear_name = ''
          this.data.is_appear = ''
          this.popupShow = false
          break
        case 'risk':
          this.data.is_risk_name = ''
          this.data.is_risk = ''
          this.popupShow = false
          break
      }
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: black;
  position: relative;
  /deep/.van-search__content--round {
    border-radius: 10px;
  }

  /deep/.van-search__content {
    background-color: #fff;
  }
  .page-list {
    padding-top: 1.6em;
    height: 100%;
    .page-search {
      height: 45px;
    }
    .van-pull-refresh {
      height: calc(100% - 50px);
    }
  }
  &-search {
    margin: 0 10px;
    background-color: #fff;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: 10px;
    overflow: hidden;

    &-select {
      width: 40%;
    }
  }

  &-list {
    box-sizing: border-box;
    width: 100%;
    & > :not(:last-child) {
      border-bottom: 1px solid #ededed;
    }

    &-item {
      margin-bottom: 20px;
      position: relative;

      .arrow {
        position: absolute;
        right: 15px;
        top: 35%;
        width: 40px;
        height: 40px;
      }

      &-inner {
        margin: 15px 10px;
        padding: 20px 40px 20px 30px;
        text-align: left;
        border-radius: 20px;
        background: #fff;
        position: relative;
        overflow: hidden;

        &-bottom {
          display: flex;
          justify-content: space-around;
          margin-top: 10px;

          &-btn {
            width: 40%;
            border-radius: 5px;
          }
        }

        .option {
          position: absolute;
          right: -5px;
          top: -5px;
          background-color: #ff9100;
          border-bottom-left-radius: 20px;
          width: 40px;
          height: 40px;

          &-icon {
            margin-left: 7px;
            margin-top: 2px;
          }
        }
      }
    }
  }
}

.qrcode-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode-bg {
  background-color: #fff;
  width: 250px;
  height: 250px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-card {
  display: flex;
  flex-wrap: wrap;
}

.list-title {
  width: 30%;
  text-align-last: justify;
}

.list-text {
  width: 70%;
}

.desc {
  margin-top: 10px;
  font-weight: 400;
  font-size: 1rem;
  text-align: left;
  color: #b4b4b4;

  p {
    margin: 0;
  }
}

.tag {
  margin-left: 10px;
  padding: 2px 5px;
  width: auto;
  height: auto;
  font-size: 12px;
  border-radius: 3px;
  text-align: center;
  background-color: #fff;
  border: 1px solid grey;
  color: grey;
}

.isAppear {
  border: 1px solid #57bd6a;
  color: #57bd6a;
}

.noAppear {
  border: 1px solid #e6a23c;
  color: #e6a23c;
}

.noRisk {
  border: 1px solid #b6263e;
  color: #b6263e;
}
</style>
